<template>
  <div id="workbench">
    <div class="menu">
      <el-menu router :default-active="defaultActive" unique-opened class="el-menu-vertical-demo">
		<el-submenu index="gudingchangsuo"  v-pms="'2861'">
		  <template slot="title">
		    <i class="iconfont icon-gudingchangsuo"></i>
		    <span>固定场所巡查</span>
		  </template>
		  <el-menu-item index="/gdcs/patrol-list" id="/gdcs/patrol-list" v-pms="'4b10'">巡查记录</el-menu-item>
		  <!-- <el-menu-item index="/gdcs/statistics" id="/gdcs/statistics"  v-pms="'cb7d'">巡查统计</el-menu-item> -->
		</el-submenu>
		<el-submenu index="daoluqiaoliang" v-pms="'6904'">
		  <template slot="title">
		    <i class="iconfont icon-daolu"></i>
		    <span>道路桥梁巡查</span>
		  </template>
		  <el-menu-item index="/dlql/patrol-list" id="/dlql/index" v-pms="'93fb'">巡查记录</el-menu-item>
		</el-submenu>
		<el-submenu index="gudingchangsuo1" v-pms="'0031'">
		  <template slot="title">
		    <i class="iconfont icon-cheliang"></i>
		    <span>车辆运行监测</span>
		  </template>
		  <el-menu-item index="/carMonitor/car-list" id="/carMonitor/car-list" v-pms="'3b81'">车辆信息</el-menu-item>
			<el-menu-item index="/gpsDevice/device-list" id="/gpsDevice/device-list" v-pms="'7b98'">GPS设备信息</el-menu-item>
			<el-menu-item index="/carDevices/car-device-list" id="/carDevices/car-device-list" v-pms="'08a2'">车辆设备管理</el-menu-item>
			<el-menu-item index="/carLimit/car-limit" id="/carLimit/car-limit"   v-pms="'b3fb'">电子围栏设置</el-menu-item>
		</el-submenu>
		<el-submenu index="personManage" v-pms="'2414'">
		  <template slot="title">
		    <i class="iconfont icon-renyua"></i>
		    <span>人员管理</span>
		  </template>
		  <el-menu-item index="/personManage/patrol-list" id="/personManage/patrol-list" v-pms="'8395'">巡查任务</el-menu-item>
		  <el-menu-item index="/education/record-list" id="/education/record-list" v-pms="'ac4c'">培训管理</el-menu-item>
		  <!-- <el-menu-item index="" id="/">人员考核</el-menu-item> -->
		</el-submenu>
        <el-submenu index="mobileManage" v-pms="'5390'">
          <template slot="title">
            <i class="iconfont icon-yidongdua"></i>
            <span>移动端管理</span>
          </template>
          <el-menu-item index="/mobileManage/appConfig" id="/mobileManage/appConfig" v-pms="'da49'">APP配置</el-menu-item>
        </el-submenu>
		<el-submenu index="sysManage" >
		  <template slot="title">
		    <i class="iconfont icon-xitongguanli"></i>
		    <span>系统管理</span>
		  </template>
		  <el-menu-item index="/sys/user-list" id="/sys/user-list" >用户管理</el-menu-item>
		  <el-menu-item index="/sys/role-list" id="/sys/role-list" >角色管理</el-menu-item>
		  <el-menu-item index="/sys/dict-list" id="/sys/dict-list"  >数据字典</el-menu-item>
		  <el-menu-item index="/sys/pms-data" id="/sys/pms-data"  >菜单管理</el-menu-item>
		  <el-menu-item index="/sys/area-list" id="/sys/area-list"  >场所管理</el-menu-item>
		</el-submenu>
      </el-menu>
    </div>
    <div class="main">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
var refreshUrl=null
  export default {
    data(){
      return{
        route:this.$router,
        defaultActive:'/gdcs/patrol-list',
      }
    },
    methods:{
        setDefaultActive(){
          if(refreshUrl){//刷新了
              this.defaultActive=refreshUrl
          }else{
              var firstRoute=document.querySelector(".el-menu .el-submenu .el-menu-item").id
              this.defaultActive=firstRoute
              this.$router.push(firstRoute)
          }

        }
    },
    mounted(){
      this.setDefaultActive()
    },
    beforeRouteEnter(to,from,next){
      if(from.path==="/"){//页面刷新
          refreshUrl=to.fullPath
      }
      next()
    },
    beforeRouteLeave(to,from,next){
      refreshUrl=null
      next()
    }

  }
</script>
<style scoped lang="scss">
  #workbench{
    display: flex;
    flex-direction: row;
    //align-items: flex-start;
    height:100%;
    //background: url(~Public/img/background2.png) no-repeat center;
    background-size:101% 101%;
	background-color: #eee;
  }
 /deep/ .menu{
    width: 250px;
    //height: 100%;
    overflow: hidden;
    //border: 1px solid #254977;
    margin-right: 10px;
	background-color: #01183F;
    .iconfont{
      font-weight: bolder;
      margin-right:10px;
    }
    .el-menu{
      height:100%;
      overflow-y: auto;
      overflow-x: hidden;
	  background-color: transparent;
    }
    .el-submenu .el-menu-item{
      text-indent:2em;
    }
	.el-menu-item{
		color: #fff;
		&:hover{
			background-color: #16365a;
		}
		&:focus{
			background-color: #16365a;
			color: #00d2ff;
		}
		&.is-active{
			background-color: #16365a;
			color: #00d2ff;
		}
	}
	.el-submenu__title{
		color: #fff;
		i{
			color: #0bd2f5;
		}
		&:hover{
			background-color: #16365a;
		}
	}
  }
  .main{
    flex: 1;
    overflow: hidden;
    margin: 10px;
    margin-left: 0px;
    border: 1px solid #eee;
    //background-color: rgba(27,48,75,0.5);
	background-color: #fff;
  }

/deep/ .el-scrollbar{
    .el-scrollbar__wrap{
        // overflow-x: hidden;
    }
}
</style>
